/*
 * @Author: humengchuan 531537052@qq.com
 * @Date: 2024-12-19 12:35:07
 * @LastEditors: humengchuan 531537052@qq.com
 * @LastEditTime: 2024-12-19 13:16:01
 * @FilePath: \project-my\next-learn-app\src\views\tailwind\hoverMenu.tsx
 * @Description: 
 */
'use client'
import React, { useState } from 'react'

export default function HoverMenu() {
    const [isHover, setIsHover] = useState(0)
    const MenuItem = ['HTML', 'CSS', 'JS', 'TS']
    return (
        <div className='h-60 mt-8 bg-slate-800 text-white p-8'>
            <ul className='flex gap-4 text-6xl bg-gray-400 relative rounded-lg'>
                {MenuItem.map((item, index) => (
                    <li
                        key={index}
                        onMouseOver={() => {
                            setIsHover(index)
                        }}
                        className='w-full h-40 relative cursor-pointer'
                    >
                        <div
                            className='absolute z-20 inset-0 grid place-content-center'>{item}</div>
                    </li>
                ))}
                {/* `translateX(${isHover} * 100)%` */}
                <div style={{ width: `${100 / MenuItem.length}%`, transform: `translateX(${isHover * 100}%)` }} className='absolute z-10 inset-0 transition-all duration-100 rounded-lg after:absolute after:inset-4 after:bg-green-500'></div>
            </ul>
        </div>
    )
}
